<template>
    <div class="'home-swipe">
        <van-search v-model="search" placeholder="请输入搜索关键词" input-align="center" @search="onSearch"
            @cancel="onCancel" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerData" :key="item.id">
               <van-image :src="item.picUrl" lazy-load/>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>

import { Toast } from 'vant';

export default {
  data() {
    return {
      search:'',
      bannerData: []
    };
  },
  created(){
    this.getBanner()
  },
  methods: {
    onSearch(val){
      Toast(val);
    },
    getBanner(){
      this.$request ('get','/recommend/banner')
      .then(res=>{
        console.log(res)
        if(res.result == 100){
          this.bannerData = res.data
        }
      })
    
      // axios.get("/api/recommend/banner")
      //   .then(response=>{
      //     console.log(response.data);
      //     let resData = response.data;
      //     if(resData.result == 100){
      //       this.bannerData = resData.data;
      //     }
      //     console.log(this.bannerData)
      //   })
      //   .catch(function(error){
      //     console.log(error);
      //   })
    },
    onCancel() {
      Toast('取消');
    },
  }
  // created(){
  //   this.getBanner();
  // },
  // mounted(){

  // }
}

</script>
<style scoped>
    /* .my-swipe .van-swipe-item img{
      width: 100%; */
        /* color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed; */
     /* } */
</style>
